<template>
  <div class="max-box set-padding">
    <!-- 头部搜索、操作 -->
    <div class="header-box">
      <div class="header-left">
        <span>票制</span>
      </div>

      <a-button type="primary" class="add-btn" @click="openTopDrawer"
        >添加新票制</a-button
      >
    </div>
    <!-- 内容区 -->
    <div class="content-box" ref="yHeight">
      <myTable
        :columns="columns"
        :dataSource="tableData"
        :total="total"
        @changePagination="getTableList"
        :scroll="{ y: yHeight }"
      >
        <template #workTicketUrl="slotData">
          <img :src="slotData.scope.workTicketUrl" alt="" class="img-box" />
        </template>
        <template #operatorTicketUrl="slotData">
          <img :src="slotData.scope.operatorTicketUrl" alt="" class="img-box" />
        </template>
        <template #handoverRecordUrl="slotData">
          <a :href="slotData.scope.handoverRecordUrl" download=""
            >下载交接记录</a
          >
        </template>
        <template #patrolRecordUrl="slotData">
          <a :href="slotData.scope.patrolRecordUrl" download="">巡回检查记录</a>
        </template>
        <template #rotationRecordsUrl="slotData">
          <a :href="slotData.scope.rotationRecordsUrl" download=""
            >切换轮换记录</a
          >
        </template>
        <template slot="operation" slot-scope="slotData">
          <div class="operation-box">
            <a-icon
              type="delete"
              class="icon-left"
              title="删除"
              @click="deleteList(slotData.scope)"
            />
          </div>
        </template>
      </myTable>
    </div>
    <ticketAdd :addVisible.sync="addVisible" @reloadList="getTableList" />
  </div>
</template>
<script>
import ticketAdd from "@/views/operationMaintenance/components/ticketAdd";
import { voteList, voteDeleteSingle } from "@/api/operationApi.js";
import { debound } from "@/utils/index.js";
export default {
  components: { ticketAdd },
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          width: 70,
          customRender: (text, record, index) => {
            return index + 1;
          },
          fixed: "left",
          align: "center",
        },
        {
          title: "工作票",
          scopedSlots: {
            customRender: "workTicketUrl",
          },
        },
        {
          title: "操作票",
          scopedSlots: {
            customRender: "operatorTicketUrl",
          },
        },
        {
          title: "交接记录",
          scopedSlots: {
            customRender: "handoverRecordUrl",
          },
        },
        {
          title: "巡回检查记录",
          scopedSlots: {
            customRender: "patrolRecordUrl",
          },
        },
        {
          title: "切换轮换记录",
          scopedSlots: {
            customRender: "rotationRecordsUrl",
          },
        },
        {
          title: "操作",
          scopedSlots: {
            customRender: "operation",
          },
          width: 120,
          fixed: "right",
        },
      ],
      tableData: [],
      total: 0,
      addVisible: false,
      yHeight: 0,
    };
  },
  methods: {
    // 获取表格数据
    getTableList(pageMsg) {
      let requestPage = {
        page: 1,
        limit: 50,
      };
      if (pageMsg?.page) {
        requestPage.page = pageMsg.page;
        requestPage.limit = pageMsg.pageSize;
      }
      voteList({ ...requestPage }).then((res) => {
        this.tableData = res.data;
        this.total = res.count;
      });
    },
    deleteList(row) {
      this.$confirm({
        title: `确认删除当前行?`,
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          console.log("OK");
          voteDeleteSingle({ id: row.id }).then((res) => {
            this.$message.success("删除成功");
            this.getTableList();
          });
        },
        onCancel: () => {
          console.log("Cancel");
        },
      });
    },
    openTopDrawer() {
      this.addVisible = true;
    },
    watchResize() {
      this.yHeight = this.$refs["yHeight"].clientHeight - 100;
      window.addEventListener("resize", this.screenResize);
    },
    screenResize: debound(function () {
      // document.documentElement.clientHeight;

      this.yHeight = this.$refs["yHeight"].clientHeight - 100;
    }, 200),
  },
  mounted() {
    this.watchResize();
    this.getTableList();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.screenResize);
  },
};
</script>
<style lang="less" scoped>
.max-box {
  width: 100%;
  padding-top: 16px;
  padding-right: 20px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-right: 20px;
    margin-bottom: 16px;
    .header-left {
      span {
        font-size: 18px;
        color: #252b3a;
      }
      i {
        font-size: 20px;
      }
    }
    .search-box {
      width: 240px;
      height: 32px;
      /deep/.ant-input {
        font-size: 12px;
      }
    }
    .add-btn {
      font-size: 12px;
    }
  }
  .content-box {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    .img-box {
      width: 50px;
      height: 50px;
      object-fit: cover;
    }
    .operation-box {
      width: 100%;
      padding-left: 15px;
      font-size: 16px;
      i {
        cursor: pointer;
        transition: all 0.5s;
        &:hover {
          color: #048fff;
        }
      }
      .icon-left {
        margin-left: 30px;
      }
    }
  }
}
</style>